<template>
  <view class="pay-result-page">
    <view class="result">
      <uni-icons type="checkbox-filled" color="#16C2A3" size="60" />
      <!-- <uni-icons type="closeempty" color="#848484" size="60" /> -->
      <view class="text">支付成功</view>
      <view class="amount">￥{{ orderDetail?.actualPayment?.toFixed(2) }}</view>
      <view class="info">
        <view class="item">
          <text class="label">创建时间</text>
          <text class="value">{{ orderDetail?.createTime }}</text>
        </view>
        <view class="item">
          <text class="label">支付时间</text>
          <text class="value">{{ orderDetail?.payTime }}</text>
        </view>
        <view class="item">
          <text class="label">订单编号</text>
          <text class="value">{{ orderDetail?.orderNo }}</text>
        </view>
      </view>
    </view>
    <view class="operation">
      <button class="uni-button" @tap="onViewOrder">查看订单</button>
      <button class="uni-button plain" @tap="onBackHome">返回首页</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useOrderDetail } from '@/hooks';


// 订单详情数据

const props = defineProps<{
  orderId: string
}>()

// 获取订单详情
const { orderDetail } = useOrderDetail(props.orderId)

// 查看订单
const onViewOrder = () => {
  uni.redirectTo({
    url: `/subpkg_medicine/order_detail/order_detail?id=${orderDetail.value?.id}`,
  })
}

// 返回首页
const onBackHome = () => {
  uni.switchTab({
    url: '/pages/index/index',
  })  
}
</script>

<style lang="scss">
.pay-result-page {
  padding: 100rpx 32rpx;

  .result {
    display: flex;
    flex-direction: column;
    align-items: center;

    .text {
      font-size: 36rpx;
      font-weight: 500;
      margin-top: 20rpx;
    }

    .amount {
      font-size: 55rpx;
      color: #16c2a3;
      margin-top: 20rpx;
    }

    .info {
      width: 80%;
      margin-top: 30rpx;
      padding: 30rpx;
      // background-color: #f6f6f6;
      border-radius: 10rpx;

      .item {
        display: flex;
        justify-content: space-between;
        font-size: 26rpx;
        margin-bottom: 15rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          color: #848484;
        }

        .value {
          color: #121826;
        }
      }
    }
  }

  .operation {
    margin-top: 60rpx;

    .uni-button {
      width: 100%;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      margin-bottom: 20rpx;
      border-radius: 40rpx;
      font-weight: normal;

      &:not(.plain) {
        background-color: #16c2a3;
        color: #fff;
      }

      &.plain {
        background-color: #fff;
        color: #16c2a3;
        border: 1px solid #16c2a3;
      }
    }
  }
}
</style>
